<template>

  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>项目数据</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Collapse v-model:activeKey="activeKey" expandIconPosition="right">
      <CollapsePanel key="1" header="筛选条件">
        <div class="comp-query">
          <div class="comp-query-title">筛选条件</div>
          <div class="comp-query-form">
            <Form :wrapper-col="{ span: 18 }">
              <Row :gutter="[24, 8]">
                <Col :span="24">
                  <FormItem label="数据类型">
                    <RadioGroup name="radioGroup" v-model:value="RadioValue">
                      <Radio :value="1">工程建设云项目</Radio>
                      <Radio :value="2">已认定历史业绩</Radio>
                    </RadioGroup>
                  </FormItem>
                </Col>
              </Row>
              <div v-if="RadioValue===1">
                <Row :gutter="[24, 8]">
                  <Col :span="8">
                    <FormItem label="项目名称">
                      <Input v-model:value="queryParam.pname" placeholder="请输入项目名称" />
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="项目区划">
                      <Cascader  v-model:value="value" change-on-select expandTrigger="hover"
                                 :field-names="{ label: 'regionName', value: 'regionCode', children: 'children' }"
                                 :options="options" @change="regionChange"
                                 placeholder="请选择区划">
                      </Cascader>
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="建设单位">
                      <Input v-model:value="queryParam.bcorp" placeholder="请输入建设单位名称" />
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="项目类别">
                      <Select placeholder="请选择" v-model:value="queryParam.ptype">
                        <Option value="">全部</Option>
                        <Option value="1">房屋建筑工程</Option>
                        <Option value="2">市政公用工程</Option>
                        <Option value="0">其他</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col :span="8">
                  </Col>
                  <Col :span="8" class="text-right">
                    <Button type="primary" ghost @click="handleReset">重置</Button>
                    <Button type="primary" @click="handleSearch">立即查询</Button>
                  </Col>
                </Row>
                <Row :gutter="[24, 20]">
                  <Col :span="16">
                    查询结果：共<span class="red">{{pagination.total}}</span>条数据
                  </Col>
                  <Col :span="8" class="text-right">

                  </Col>
                </Row>
              </div>
              <div v-else>
                <Row :gutter="[24, 8]">
                  <Col :span="8">
                    <FormItem label="项目名称">
                      <Input v-model:value="HisQueryParam.prjName" placeholder="请输入项目名称" />
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="项目区划">
                      <Cascader  v-model:value="HisValue" change-on-select expandTrigger="hover"
                                 :field-names="{ label: 'regionName', value: 'regionCode', children: 'children' }"
                                 :options="options" @change="regionChange"
                                 placeholder="请选择区划">
                      </Cascader>
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="建设单位">
                      <Input v-model:value="HisQueryParam.buildCorp" placeholder="请输入建设单位名称" />
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="项目类别">
                      <Select placeholder="请选择" v-model:value="HisQueryParam.prjTypeNum">
                        <Option value="">全部</Option>
                        <Option value="XM_GCLB_0001">房屋建筑工程</Option>
                        <Option value="XM_GCLB_0002">市政公用工程</Option>
                        <Option value="other">其他</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col :span="8">
                    <FormItem label="施工许可证编码" :labelCol="{span:7 }" :wrapperCol="{span:15,offset:1  }">
                      <Input v-model:value="HisQueryParam.buildLicence" placeholder="请输入施工许可证编码" />
                    </FormItem>

                  </Col>
                  <Col :span="8" class="text-right">
                    <Button type="primary" ghost @click="handleReset">重置</Button>
                    <Button type="primary" @click="HisHandleSearch">立即查询</Button>
                  </Col>
                </Row>
                <Row :gutter="[24, 20]">
                  <Col :span="16">
                    查询结果：共<span class="red">{{HisPaginationRef.total}}</span>条数据
                  </Col>
                  <Col :span="8" class="text-right">

                  </Col>
                </Row>
              </div>
            </Form>
          </div>
        </div>
      </CollapsePanel>
    </Collapse>

    <div class="reminder">
      <span class="mr8">温馨提示</span>仅展示已办理施工许可的项目
    </div>

    <div class="comp-table">

      <List v-if="RadioValue===1"
          item-layout="horizontal"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading" >
        <template #renderItem="{ item , index}">
          <ListItem>
            <div class="initWrap flex-s">
              <projectTypeIcon :p-type="pType(item.projectType)"></projectTypeIcon>
              <div class="init-sr">
                <h4 class="flex-s">
                  <a target="_blank" :href="`/pro/${item.projectId}`">{{ item.projectName }}   </a>
                  <span class="address"><i></i> {{ item.projectRegion }}</span>
                </h4>
                <p class="init-des">
                  <span class="mr20">立项赋码：{{ item.assignCode }}</span>
                  <span>项目类别：{{ item.projectType }}</span>
                </p>
                <p class="init-des">
                  <span class="mr20">建设单位：{{ item.constrUnitName }}</span>
                </p>
              </div>
            </div>

          </ListItem>
        </template>
      </List>

      <List v-else :dataSource="HisDataSource"
            item-layout="horizontal"
            :pagination="HisPaginationRef"
            :loading="loading" >
        <template #renderItem="{ item , index}">
          <ListItem>
            <div class="initWrap flex-s">
              <div class="init-sx" :style="`background:#2C6FB9`">历史业绩</div>
              <div class="init-sr">
                <h4 class="flex-s">
                  <a target="_blank" :href="`/achievement/${item.applyId}`">{{ item.prjName }}   </a>
                  <span class="address"><i></i> {{ item.prjArea }}</span>
                </h4>
                <p class="init-des">
                  <span class="mr20">施工许可证编号：{{ item.buiLicNum }}</span>
                  <span>项目类别：{{ item.prjType }}</span>
                </p>
                <p class="init-des">
                  <span class="mr20">建设单位：{{ item.buildCorpName }}</span>
                </p>
              </div>
            </div>

          </ListItem>
        </template>
      </List>

    </div>
  </div>
</template>

<script lang="ts" >
import { defineComponent, ref, unref, toRefs, onMounted, reactive } from "vue";
import {
  Row,
  Col,
  Form,
  Input,
  Button,
  Select,
  Table,
  Radio,
  Cascader,
  Collapse,
  Breadcrumb,
  List
} from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import {getProListApi, getPrjList, getRegionProv} from '/@/api/pro';
import projectTypeIcon from '/@/components/projectTypeIcon/index.vue';
interface queryConfig {
  area: string;
  bcorp: string;
  current: number;
  pname:string;
  ptype:string;
  size: number;
}
interface HisQueryConfig {
  buildCorp: string;
  buildLicence: string;
  current: number;
  prjArea:string;
  prjName:string;
  prjTypeNum:string;
  size: number;
}
interface Option {
  regionCode: string;
  regionName: string;
  disabled?: boolean;
  children?: Option[];
  [key: string]: any;
}
export default defineComponent({
  name: "ModuleComp",
  components: {
    Row, Col, Form, FormItem: Form.Item, Input, Button, Select,
    Cascader, Option: Select.Option, Table, Radio, RadioGroup:Radio.Group,
    Collapse,  CollapsePanel:Collapse.Panel,
    Breadcrumb,  BreadcrumbItem:Breadcrumb.Item,
    BreadSeparator:Breadcrumb.Separator,
    List, ListItem: List.Item, projectTypeIcon
  },
  setup() {
    const search = ref<string>('')
    const options=ref<Option[]>([]);
    const RadioValue = ref<number>(1);
    const value = ref<string[]>([]);
    const HisValue = ref<string[]>([]);
    const { query } = toRefs(useRoute());
    const loading = ref<boolean>(true);
    const router = useRouter();
    search.value = unref(query).search as string || '';

    //正常企业查询
    const dataSource = ref<unknown[]>([]);
    const paginationRef = ref({
      current: 1,
      total: 0,
      pageSize: 10 ,//每页中显示10条数据,
      onChange: (page: number) => {
        paginationRef.value.current = page;
        queryParam.current = page;
        getTableList();
      }
    })

    let queryParam = reactive<queryConfig>({
      area: "",
      bcorp: '',
      current: 1,
      pname:unref(query).search as string || "",
      ptype: "",
      size: 10
    })


    const regionChange = (value)=>{
      if(value){
        if(RadioValue.value===1){   //工程建设云项目
          queryParam.area = value[value.length-1]
        }else {  //已认定历史业绩
          HisQueryParam.prjArea = value[value.length-1]
        }
      }
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getProListApi(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }

    const handleSearch = () => {
      queryParam.current = 1;
      paginationRef.value.current = 1;
      getTableList();
    }

    const handleReset = () => {
      router.push({
        query: { search: '' }
      });
      if(RadioValue.value===1){   //工程建设云项目
        value.value = [];
        paginationRef.value.current = 1;
        Object.assign(queryParam,{
          area: "",
          bcorp: "",
          ptype: "",
          pname:'',
          current: 1
        })
        getTableList();

      }else {   //已认定历史业绩
        HisValue.value = [];
        HisPaginationRef.value.current = 1;
        Object.assign(HisQueryParam,{
          prjArea: "",
          buildCorp: "",
          buildLicence: "",
          prjName: "",
          prjTypeNum:'',
          current: 1
        })
        HisGetTableList();
      }

    }

    const methodRegion = async () => {
      const data = await getRegionProv({code:65});
      options.value = data[0].children
    }

    //------------------------------------------------//

    //历史业绩列表请求
    const HisDataSource = ref<unknown[]>([]);

    const HisPaginationRef = ref({
      current: 1,
      total: 0,
      pageSize: 10 ,//每页中显示10条数据
      onChange: (page: number) => {
        HisPaginationRef.value.current = page;
        HisQueryParam.current = page;
        HisGetTableList();
      }
    })

    let HisQueryParam = reactive<HisQueryConfig>({
      buildCorp: "",
      buildLicence: '',
      current: 1,
      prjName:unref(query).search as string || "",
      prjArea: "",
      prjTypeNum: "",
      size: 10
    })

    const HisGetTableList = async () => {
      loading.value = true;
      let  data = await getPrjList(HisQueryParam);
      HisPaginationRef.value.total = data.total;
      HisPaginationRef.value.pageSize = data.size;
      HisDataSource.value = data.records;
      loading.value = false;
    }

    const HisHandleSearch =  () => {
      HisQueryParam.current = 1;
      HisPaginationRef.value.current = 1;
      HisGetTableList();
    }

    const pType = data =>{
      switch (data) {
        case '房屋建筑工程':
          return  1
        case '市政公用工程':
          return 2
        default:
          return 0
      }
    };


    //初始化
    onMounted(() => {
      getTableList();
      HisGetTableList();
      methodRegion();
    });

    return {
      activeKey : ref(['1']),pType,
      queryParam,methodRegion, dataSource, loading, pagination: paginationRef,RadioValue,
      getTableList, handleSearch, handleReset,value,options,regionChange,
      HisValue,HisDataSource,HisPaginationRef,HisQueryParam,HisHandleSearch
    };
  },
});
</script>

<style lang="less" scoped>
::v-deep(.ant-table-thead) {
  tr {
    th {
      background: #fff;
    }
  }
}

.ant-list{
  min-height: 300px;
}

.comp-query {
  padding: 2px 5px;
  background: @white;

  .comp-query-title {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #181f2a;
  }

  ::v-deep(.ant-form-item-label) {
    > label {
      color: @grey;
    }


  }

  ::v-deep(.ant-form-item) {
    margin-bottom: 0;
  }

  ::v-deep(.ant-btn) {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }

  ::v-deep(.ant-col-offset-1) {
    margin-left: 2.2%;
  }

}

.comp-table {
  min-height: 500px;
  padding: 0 30px;
  margin-top: 5px;
  background: @white;
}

.initWrap .init-sr h4 a{
  display: inline-block;
  max-width: 760px;
}

.reminder{
  padding: 10px 20px;
  margin-top: 5px;
  color: #FB533C;
  background: #FFEBEC;
  border: 1px solid #FFBEB5;

  span{
    display: inline-block;
    padding: 3px 8px;
    color: white;
    background: #FF6651;
    border-radius: 3px;
  }
}
</style>
